<template>
    <MainLayout>
     <router-view></router-view>
      <div class="customer-service">
      <h2>客服管理</h2>
      
      <!-- 添加客服信息表单 -->
      <el-form :inline="true" class="add-customer-service-form">
        <el-form-item label="客服姓名">
          <el-input v-model="newCustomerService.name" placeholder="请输入客服姓名" />
        </el-form-item>
        <el-form-item label="客服工号">
          <el-input v-model="newCustomerService.employeeId" placeholder="请输入客服工号" />
        </el-form-item>
        <el-form-item label="客服电话">
          <el-input v-model="newCustomerService.phone" placeholder="请输入客服电话" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addCustomerService">添加客服信息</el-button>
          <el-button type="danger" :disabled="selectedCustomerServices.length === 0" @click="batchDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 客服信息列表 -->
      <el-table
        :data="paginatedCustomerServices"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="name" label="客服姓名" />
        <el-table-column prop="employeeId" label="客服工号" />
        <el-table-column prop="phone" label="客服电话" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" @click="editCustomerService(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteCustomerService(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="customerServices.length"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
      />
  
      <!-- 编辑客服信息模态框 -->
      <el-dialog v-model="isEditing" title="编辑客服信息" width="30%">
        <el-form :model="editingCustomerService">
          <el-form-item label="客服姓名">
            <el-input v-model="editingCustomerService.name" />
          </el-form-item>
          <el-form-item label="客服工号">
            <el-input v-model="editingCustomerService.employeeId" />
          </el-form-item>
          <el-form-item label="客服电话">
            <el-input v-model="editingCustomerService.phone" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="saveEdit">保存</el-button>
        </template>
      </el-dialog>
      </div>
    </MainLayout>
  </template>
  
  <script>
    import MainLayout from '@/layouts/MainLayout.vue'
  export default {
    components: {
      MainLayout
    },
    data() {
      return {
        customerServices: [
          { id: 1, name: '张三', employeeId: 'CS001', phone: '13800138000' },
          { id: 2, name: '李四', employeeId: 'CS002', phone: '13800138001' }
        ],
        newCustomerService: {
          name: '',
          employeeId: '',
          phone: ''
        },
        isEditing: false,
        editingCustomerService: {
          id: null,
          name: '',
          employeeId: '',
          phone: ''
        },
        currentPage: 1,
        pageSize: 5,
        selectedCustomerServices: []
      };
    },
    computed: {
      paginatedCustomerServices() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        return this.customerServices.slice(start, end);
      }
    },
    methods: {
      addCustomerService() {
        if (this.newCustomerService.name && this.newCustomerService.employeeId && this.newCustomerService.phone) {
          this.customerServices.push({
            id: this.customerServices.length + 1,
            ...this.newCustomerService
          });
          this.newCustomerService = { name: '', employeeId: '', phone: '' };
        }
      },
      editCustomerService(customerService) {
        this.isEditing = true;
        this.editingCustomerService = { ...customerService };
      },
      saveEdit() {
        const index = this.customerServices.findIndex(cs => cs.id === this.editingCustomerService.id);
        if (index !== -1) {
          this.customerServices.splice(index, 1, this.editingCustomerService);
        }
        this.cancelEdit();
      },
      cancelEdit() {
        this.isEditing = false;
        this.editingCustomerService = { id: null, name: '', employeeId: '', phone: '' };
      },
      deleteCustomerService(customerServiceId) {
        this.customerServices = this.customerServices.filter(customerService => customerService.id !== customerServiceId);
      },
      handlePageChange(page) {
        this.currentPage = page;
      },
      handleSelectionChange(selection) {
        this.selectedCustomerServices = selection;
      },
      batchDelete() {
        this.$confirm('确定要删除选中的客服信息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const ids = this.selectedCustomerServices.map(customerService => customerService.id);
          this.customerServices = this.customerServices.filter(customerService => !ids.includes(customerService.id));
          this.selectedCustomerServices = [];
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    beforeUnmount() {
      console.log('Component is about to be unmounted');
      this.isEditing = false;
      this.editingCustomerService = { id: null, name: '', employeeId: '', phone: '' };
      this.selectedCustomerServices = [];
    },
    unmounted() {
      console.log('Component has been unmounted');
    }
  };
  </script>
  
  <style scoped>
  .customer-service-management {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 30px;
    background-color: #fff;
    padding-bottom: 100px;
  }
  
  .pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    margin-top: 24px;
    justify-content: center;
    padding: 16px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }
  
  .el-dialog {
    border-radius: 8px;
  }
  
  .el-dialog__header {
    background-color: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
    border-radius: 8px 8px 0 0;
    padding: 16px;
  }
  
  .el-dialog__body {
    padding: 20px;
  }
  
  .el-dialog__footer {
    padding: 16px;
    border-top: 1px solid #ebeef5;
    background-color: #f5f7fa;
    box-shadow: none;
  }
  
  .customer-service-management h2 {
    margin-top: 10px;
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 500;
    text-align: left;
  }
  </style>